<template>
  <el-dialog
    title=""
    :visible.sync="centerDialogVisibleOn"
    :before-close="onClose"
    width="60%"
    center>
    <el-form size="small" label-width="100px" style="margin-bottom: 10px;">
      <el-row :gutter="10">
        <el-col :span="3">
          <el-image :preview-src-list="[data.doorwayPhotoUrl]" :src="data.doorwayPhotoUrl"/>
        </el-col>
        <el-col :span="7" v-for="item in form" :key="item.value">
          <el-form-item :label="item.label">
            <el-input :disabled="true" :value="data[item.value]"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-button type="primary" @click="onCheckImg(2)">合格</el-button>
          <el-button type="danger" @click="onCheckImg(3)">不合格</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs :v-model="tabPosition" type="card" style="margin-bottom: 30px;" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in lists" :key="index" :name="index.toString()" :label="item">
        <el-checkbox-group v-model="checkList" style="display: flex;flex-wrap: wrap;justify-content: space-between;">
          <el-checkbox :label="item.id" :key="o+'img'" v-for="(item,o) in photoList"
                       style="margin-right:0;border:1px #ddd solid;padding:10px;margin-bottom: 10px;">
            <el-row type="flex">
              <el-col :span="5">
                <el-image  :preview-src-list="[`//images.weserv.nl/?url=${item.photoUrl}`]" :src="'//images.weserv.nl/?url='+item.photoUrl" />
<!--                <el-image-->
<!--                  style="width:100px"-->
<!--                  :src="item.photoUrl"-->
<!--                  :preview-src-list="item.srcList">-->
<!--                </el-image>-->
              </el-col>
              <el-col :span="12">
                <div> {{ item.typeRemark }}</div>
                <el-input :disabled="true" :value="item.commonName"></el-input>
                <div>检查状态</div>
                <el-input :disabled="true" :value="lists[item.checkStatus]"></el-input>
                <div>拍照时间</div>
                <el-input :disabled="true" :value="item.shootTime"></el-input>
                <div>类型</div>
                <el-input disabled  :value="typeList[item.type]"></el-input>
              </el-col>
            </el-row>
          </el-checkbox>
        </el-checkbox-group>
      </el-tab-pane>
      <el-tab-pane :key="4" name="4" label="在售品项" >
        <el-table
          :data="savedOnSaleGoodsata"
          style="width: 100%">
          <el-table-column
            prop="barcode"
            label="条码"
            width="180">
          </el-table-column>
          <el-table-column
            prop="goodsName"
            label="名称"
            align="center"
            />
          <el-table-column
            prop="model"
            align="center"
            label="规格"/>
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :total="savedOnSaleGoodsataQuery.total"
          @current-change="handleCurrentChange"
          :current-page.sync="savedOnSaleGoodsataQuery.page"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import {getPhoto,checkImg,checkSuccess,checkFail} from '@/api/erp/customerVisitRecord'
  import { getSavedOnSaleGoods } from '../../../../api/erp/customerVisitRecord'
  export default {
    name: "crm-cus-visit-view",
    data() {
      return {
        dataImgLists:[],
        photoList:[],
        checkList: [],
        centerDialogVisibleOn: false,
        tabPosition: 0,
        lists: ['全部' ,'未检查' ,'合格', '不合格'],
        data:{},
        typeList:['','地堆','冰冻','常规陈列','大排面','核心店'],
        savedOnSaleGoodsata:[],
        savedOnSaleGoodsataQuery:{page:0,size:20,total:0},
        form: [{
          value: 'busDate',
          label: '日期'
        }, {
          value: 'code',
          label: '单据编号'
        }, {
          value: 'customerName',
          label: '客户'
        }, {
          value: 'createUserName',
          label: '拜访人员'
        }, {
          value: 'signInTime',
          label: '拜访签到时间'
        }, {
          value: 'signOutTime',
          label: '拜访签退时间'
        }]
      }
    },
    props: ['id', 'centerDialogVisible','crud'],
    mounted() {
      this.$nextTick(() => {
        this.centerDialogVisibleOn = this.centerDialogVisible;
        this.onView();
      })
    },
    watch:{
      id(n){
        this.savedOnSaleGoodsataQuery.page = 0
        this.savedOnSaleGoodsata = []
      }
    },
    methods: {
      onCheckImg(num){//点击合格与不合格
        if (this.checkList.length!==0 && num===2){
          checkSuccess(this.checkList).then(res=>{
            if(res.status===200){
              this.crud.refresh();
              this.$emit('onCenterDialogVisible',1);
              this.$message({
                message: res.msg,
                type: 'success'
              });
            }
          })
        }else if (this.checkList.length!==0 && num===3){
          checkFail(this.checkList).then(res=>{
            if(res.status===200){
              this.crud.refresh();
              this.$emit('onCenterDialogVisible',1);
              this.$message({
                message: res.msg,
                type: 'success'
              });
            }
          })
        }else {
          this.$message({
            message: '请先选择!',
            type: 'error'
          });
        }

        // checkImg({commonCheckStatus:num,ids:this.checkList}).then((res)=>{
        //   this.centerDialogVisibleOn = false;
        //   if(res.status===200){
        //     this.crud.refresh();
        //     this.$emit('onCenterDialogVisible',1);
        //     this.$message({
        //       message: res.msg,
        //       type: 'success'
        //     });
        //   }
        // })
      },
      handleCurrentChange(e){
        this.savedOnSaleGoodsataQuery.page = e-1
        this.getSaleGoods()
      },
      onView() {
        getPhoto({id:this.id}).then((res)=>{
          this.data = res.data;
          this.data.photoList.map(item=>{
            // console.log(item)
            item.srcList = [item.photoUrl]
          });
          this.dataImgLists = res.data.photoList
          this.photoList = this.dataImgLists
          console.log(res.data.photoList);
        });
      },
      onClose() {
        this.$emit('onCenterDialogVisible', 1);
      },
      getSaleGoods(){
        getSavedOnSaleGoods({id:this.id,...this.savedOnSaleGoodsataQuery}).then(res=>{
          if (res.status === 200){
            this.savedOnSaleGoodsata = res.data.content
            this.savedOnSaleGoodsataQuery.total = res.data.totalElements
          }else{
            this.$message.error(res.msg)
          }
        })
      },
      handleClick(tab, event) {
        if (tab.index === '4')return this.getSaleGoods()
        this.tabPosition = Number(tab.index);
        this.photoList = []
        if (this.tabPosition===0)this.photoList=this.dataImgLists
        this.dataImgLists.forEach(item=>{
          if (item.checkStatus === this.tabPosition)this.photoList.push(item)
        })
        // this.photoList = this.dataImgLists[this.tabPosition] ? this.dataImgLists[this.tabPosition].photoList : [];
        // console.log('111', this.dataImgLists[this.tabPosition],this.tabPosition);
      }
    }

  }
</script>

<style scoped>

</style>
